<template>
	<view>
		<u-navbar :isFixed="true" :borderBottom="false" back-icon-color="#333" :background="{background:'#eee'}" title="问题反馈" ></u-navbar>
		<u-tabs :list="list" :is-scroll="false"  @change="changeTab" active-color="#dd0000" style="position: fixed;width: 100%;"></u-tabs>
		<view class="feedback-list">
			<view class="feedback-item" v-for="(item,index) in page_list">
				<view class="feedback-item-title">
					<view class="feedback-item-title-left">
						时间：{{item.created_at}}
					</view>
					<view class="feedback-item-title-right">
						{{item.status_name}}	
					</view>
				</view>
				<view class="feedback-item-content">
					<view class="feedback-item-content-left">
						{{item.type_name}}
					</view>
					<view class="feedback-item-content-right">
						{{item.content}}
					</view>
				</view>
				<view class="feedback-item-goto-ditail" @tap="$Router.push({path:'/pages/user/feedback/detail',query:{id:item.id}})">
					<text style="color: #2979ff;">查看详情</text>
				</view>
			</view>
		</view>
		<!-- 更多 -->
		<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc"  />
		<!-- 空置页 -->
		<shopro-empty v-show="isEmpty" marginTop="300rpx" :image="$IMG_URL + '/imgs/empty/no_data.png'" tipText="暂无数据~" >
		</shopro-empty>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				list:[
					{
						name:"未处理"
					},
					{
						name:"已处理"
					}
				],
				page_list:[],
				loadStatus: 'loadmore',
				isEmpty:false,
				cur_page:1,
				lastPage:1,
				cur_index:0,
			}
		},
		onShow(){
			this.page_list = [];
			this.getPageInit();
		},
		methods:{
			changeTab(index){
				this.page_list = [];
				this.cur_page = 1;
				this.cur_index = index;
				this.getPageInit()
			},
			// 触底加载更多
			onReachBottom() {
				if (this.cur_page < this.lastPage) {
					this.cur_page += 1;
					this.getPageInit();
				}
			},
			getPageInit(){
				this.loadStatus = 'loading';
				let mode = ['unhandle','handled']
				let params = {
					mode:mode[this.cur_index],
					page:this.cur_page
				}
				this.$http('user.feedback_list',params).then(res=>{
					if(res.total > 0){
						this.lastPage += 1;
						this.loadStatus = this.cur_page < (res.total / 10) ? 'loadmore' : 'nomore';
						this.page_list = [...this.page_list,...res.rows];
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feedback-list{
		padding: 20rpx;
		margin-top: 60rpx;
		.feedback-item{
			background-color: #fff;
			// height: 150rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
			padding: 10px;
			.feedback-item-title{
				display: flex;
				justify-content: space-between;
				color: #909399;
				font-size: 24rpx;
				.feedback-item-title-right{
					color:#18b566;
				}
			}
			.feedback-item-content{
				margin-top: 20rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				.feedback-item-content-left{
					background-color: #dd0000;
					padding: 6rpx 10rpx;
					color: #fff;
					margin-right: 20rpx;
					font-size: 20rpx;
				}
				.feedback-item-content-right{
					width: 80%;  //宽度
					 
					overflow: hidden;  //超出文本隐藏
					 
					white-space: nowrap;  //不换行，只显示一行
					 
					text-overflow: ellipsis;  //超出部分省略号显示
				}
			}
			.feedback-item-goto-ditail{
				text-align: right;
				margin: 20rpx 0;
				font-size: 24rpx;
			}
		}
		
	}
	

</style>